<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>雷达</title>
	</head>
	<style>
	css
	.loader{
	    width: 150px; /* 设置宽度为150像素 */
	    height: 150px; /* 设置高度为150像素 */
	    background: transparent; /* 设置背景透明 */
	    
	    display: flex; /* 使用弹性布局 */
	    justify-content: center; /* 水平居中对齐 */
	    align-items: center; /* 垂直居中对齐 */
	    
	    position: relative; /* 相对定位 */
	    
	    box-shadow: 25px 25px 75px rgba(0,0,0,0.55); /* 设置盒子阴影 */
	    
	    border-radius: 50%; /* 设置圆角 */
	    
	    overflow: hidden; /* 隐藏溢出部分 */
	}
	
	.loader::before{
	    content: ""; /* 伪元素内容为空 */
	    position: absolute; /* 绝对定位 */
	    inset: 20px; /* 内部边距为20像素 */
	    background: transparent; /* 背景透明 */
	    border: 1px dashed #444; /* 边框样式为虚线，颜色为#444 */
	    border-radius: 50%; /* 设置圆角 */
	    box-shadow: 
	        inset -5px -5px 25px rgba(0,0,0,0.25), /* 设置内阴影 */
	        inset 5px 5px 35px rgba(0,0,0,0.25); /* 设置内阴影 */
	}
	
	.loader::after{
	    content: ''; /*伪元素内容为空 */
	    position: absolute; /* 绝对定位 */
	    width: 50px; /* 设置宽度为50像素 */
	    height: 50px; /* 设置高度为50像素 */
	    border: 1px dashed #444; /* 边框样式为虚线，颜色为#444 */
	    border-radius: 50%; /* 设置圆角 */
	    box-shadow:
	        inset -5px -5px 25px rgba(0,0,0,0.25), /* 设置内阴影 */
	        inset 5px 5px 35px rgba(0,0,0,0.25); /* 设置内阴影 */
	}
	
	.loader span{
	    width: 100%; /* 水平占满父元素 */
	    height: 100%; /* 垂直占满父元素 */
	    background: transparent; /* 背景透明 */
	    position: absolute; /* 绝对定位 */
	    top:50%; /* 顶部距离父元素上边界的距离为父元素高度的一半 */
	    left:50%; /* 左侧距离父元素左边界的距离为父元素宽度的一半 */
	    border-top: 1px dashed #fff; /* 上边框样式为虚线，颜色为#fff */
	    animation:radar 2s linear infinite; /* 执行动画效果，名称为radar，持续时间为2秒，线性变化，无限循环 */
	    transform-origin: top left; /* 设置旋转变形的原点为左上角 */
	}
	
	.loader span::before{
	    content: ''; /* 伪元素内容为空 */
	    position: absolute; /* 绝对定位 */
	    top: 0; /* 顶部距离父元素上边界的距离为0 */
	    left: 0; /* 左侧距离父元素左边界的距离为0 */
	    width: 100%; /* 水平占满父元素 */
	    height: 100%; /* 垂直占满父元素 */
	    background: seagreen; /* 背景颜色为seagreen */
	    filter: blur(30px) drop-shadow(20px 20px 20px seagreen); /* 设置模糊效果和投影效果 */
	    transform-origin: top left; /* 设置旋转变形的原点为左上角 */
	    transform: rotate(-55deg); /* 旋转-55度 */
	}
	
	@keyframes radar {
	    0%{
	        transform: rotate(0deg); /* 从0度开始旋转 */
	    }
	    100%{
	        transform: rotate(360deg); /* 旋转一周，到达360度 */
	    }
	}
	</style>
	<body>
		<div class="loader">
			<span></span>
		</div>
	</body>
</html>